<div class="row" data-ng-controller="GnCSWVirtualController">
  <div class="col-lg-4">
    <div class="panel panel-default">
      <div class="panel-heading" data-translate="">virtualCSW</div>
      <div class="panel-body">
        <input class="form-control"
               data-ng-show="cswVirtual > 1"
               data-ng-model="virtualCSWSearch.$" autofocus=""
               placeholder="{{'filter' | translate}}"/>
        <input type="hidden" data-ng-model="virtualCSWSelected.id"/>
        <div class="list-group">
          <a href="" class="list-group-item"
             data-ng-repeat="v in pageItems()"
             data-ng-click="selectVirtualCSW(v)" title="{{v.description}}"> {{v.name}} </a>
          <span data-gn-pagination-list=""
                data-items="cswVirtual | filter:virtualCSWSearch | orderBy:'name'"
                data-cache="cswVirtual"/>
        </div>

        <button type="button" class="btn btn-primary btn-block" data-ng-click="addVirtualCSW()">
          <i class="fa fa-plus"/>
          <span data-translate="">newVirtualCSW</span>
        </button>
      </div>
    </div>

    <div data-gn-need-help="administrator-guide/configuring-the-catalog/virtual-csw-configuration.html"></div>
  </div>


  <div class="col-lg-8" data-ng-hide="virtualCSWSelected.id == null">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span data-ng-hide="virtualCSWSelected.id == ''" data-translate="">updateVirtualCSW</span>
        <span data-ng-hide="virtualCSWSelected.id != ''" data-translate="">newVirtualCSW</span>
        <strong>{{virtualCSWSelected.name}}</strong> (<a
        href="{{getCapabilitiesUrl(virtualCSWSelected)}}" data-translate="">capabilities</a>)

        <div class="btn-toolbar">
          <button type="button" class="btn btn-primary pull-right"
                  data-ng-disabled="!virtualCSWUpdated || gnVirtualCSWEdit.servicename.$error.pattern"
                  data-ng-click="saveVirtualCSW('#gn-virtualcsw-edit')">
            <i class="fa fa-save"></i>&nbsp;
            {{"saveVirtualCSW"|translate}}
          </button>
          <button type="button" class="btn btn-primary pull-right btn-danger"
                  data-ng-hide="virtualCSWSelected.id == ''"
                  data-ng-click="deleteVirtualCSW(virtualCSWSelected.id)">
            <i class="fa fa-trash"></i>&nbsp;
            {{"deleteVirtualCSW"|translate}}
          </button>
        </div>
      </div>
      <div class="panel-body">
        <form id="gn-virtualcsw-edit" name="gnVirtualCSWEdit" class="form-horizontal"
              data-ng-keypress="updatingVirtualCSW()">
              <input type="hidden" name="_csrf" value="{{csrf}}"/>
          <fieldset>
            <legend data-translate="">serviceDescription</legend>
            <input type="hidden" name="id" data-ng-model="virtualCSWSelected.id"
                   value="{{virtualCSWSelected.id}}"/>
            <div data-ng-class="gnVirtualCSWEdit.servicename.$valid != true ? 'has-error' : ''">
              <label data-translate="">virtualCSWName</label>
              <input type="text" id="servicename" name="servicename"
                     class="form-control" required=""
                     data-ng-pattern="/csw-[\d\w]{1,}/" data-ng-model="virtualCSWSelected.name"/>
              <p class="help-block" data-translate="">virtualCSWNameHelp</p>
              <p class="help-block error"
                 data-ng-show="gnVirtualCSWEdit.servicename.$error.pattern || gnVirtualCSWEdit.servicename.$error.required"
                 data-translate="">virtualCSWNamePattern</p>
            </div>

            <label data-translate="">virtualCSWNameDescription</label>
            <textarea name="servicedescription" class="form-control"
                      data-ng-model="virtualCSWSelected.description"/>
            <p class="help-block" data-translate="">virtualCSWNameDescriptionHelp</p>

            <label data-translate="">virtualCSWExplicitQuery</label>
            <small><a style="cursor: pointer"
                      data-ng-click="showExplicitQuery = !showExplicitQuery">{{(showExplicitQuery ?
              'virtualCSWHideExplicitQuery' : 'virtualCSWShowExplicitQuery') | translate}}</a>
            </small>
            <input data-ng-show="showExplicitQuery" name="serviceExplicitQuery" class="form-control"
                   data-ng-model="virtualCSWSelected.explicitQuery"/>
            <p class="help-block" data-ng-show="showExplicitQuery" data-translate="">
              virtualCSWExplicitQueryHelp</p>
          </fieldset>

          <fieldset>
            <legend data-translate="">serviceFilter</legend>
            <div class="form-group"
                 data-ng-repeat="filter in virtualCSWSelected.parameters">
              <div class="col-md-3">
                <div class="input-group">
                  <input type="text" class="form-control"
                         data-ng-model="filter.name"/>
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown" aria-expanded="false">
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                      <li data-ng-repeat="f in filterHelper">
                        <a href="" data-ng-click="filter.name = f">
                          <span data-translate="">{{f}}</span>
                        </a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <select class="form-control"
                      data-ng-model="filter.occur"
                        data-ng-options="('virtualcswParamOccurOpt' + occur | translate) for occur in occurs"/>
              </div>
              <div class="col-md-4">
                <div class="input-group">
                  <input type="text"
                         class="form-control"
                         data-ng-model="filter.value"/>
                  <div class="input-group-btn"
                       data-ng-show="filter.name === '_cat' || filter.name === '_groupPublished'">
                    <button type="button" class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown" aria-expanded="false">
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                      <li data-ng-repeat="c in categories"
                          data-ng-show="filter.name === '_cat'">
                        <a href="" data-ng-click="filter.value = c.name">
                          <span data-translate="">{{c.label[lang]}}</span>
                        </a>
                      </li>

                      <li data-ng-repeat="g in groupsFilter | orderBy:sortByLabel"
                          data-ng-show="filter.name === '_groupPublished'">
                        <a href="" data-ng-click="filter.value = g.name">
                          <span data-translate="">{{g.label[lang]|empty:g.name}}</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-md-1">
                <button class="btn btn-default"
                        data-ng-click="removeFilter(key)">
                  <i class="fa fa-times"></i>
                </button>
              </div>
            </div>

            <button class="btn btn-default"
                    data-ng-click="addFilter()">
              <i class="fa fa-plus"></i>&nbsp;
              <span data-translate="">addNewFilter</span>
            </button>

          </fieldset>
        </form>

      </div>
    </div>
  </div>
</div>
